<template>
  <div class="remarks-style">
    <div
      class="remarks-style-bg"
      :style="{ backgroundImage: `url(${publicUrls + 'free/style9/pop-upBg.webp'})` }"
    >
      <div
        class="right-top"
        :style="{ backgroundImage: `url(${publicUrls + 'free/style9/rightTopBg.webp'})` }"
      >
        <img
          :src="publicUrls + 'free/style9/pop-upCloseIcon.png'"
          alt=""
          class="close-btn"
          @click="store.setChildRemarksShow(false)"
        />
      </div>
      <div class="title-box">
        <p class="title">{{ store.childTitle }}</p>
        <p class="sub-title" v-if="store.childSubTitle">——{{ store.childSubTitle }}</p>
      </div>
      <scrollBox
        color="rgba(51, 51, 51, 1)"
        v-if="Scrollheights"
        :remarks="store.childRemarks"
        :byid="100"
        :height="getScrollWComputed"
        :scroll-src="publicUrls + 'free/style9/scrollIcon.png'"
      >
        <template #solidBorder>
          <div class="solidBorder-child"></div>
          <!-- <img :src="publicUrls + 'free/style9/scrollIcon.png'" alt="" class="scroll-icon" /> -->
        </template>
      </scrollBox>
      <div class="remarks"></div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'style9',
});
</script>
<script lang="ts" setup>
import { publicUrls } from '@/utils/minxin';
import scrollBox from '../scrollBox.vue';
import { useProjectStore } from '@/store';
import { ref, computed, defineComponent } from 'vue';
import { urls } from '@/utils/request/upload';
const store = useProjectStore();
let viewportHeight = window.innerHeight;
const Scrollheights = ref();
Scrollheights.value = (viewportHeight / 900) * 480;
const getScrollWComputed = computed(() => {
  if (store.isMobileType) {
    let rootNode = document.documentElement;

    // 获取计算后的样式
    let computedStyle = window.getComputedStyle(rootNode);

    // 读取字体大小（注意这里返回的可能是一个包含单位的字符串，如"16px"）
    let fontSize = computedStyle.fontSize;

    // 如果你需要一个数字值（不带单位）进行计算，你可能需要解析这个字符串
    // 例如，使用正则表达式或split()方法去除单位，并将结果转换为数字
    let fontSizeNumber = parseFloat(fontSize.replace(/[^0-9.-]/g, ''));
    // let heights = (fontSizeNumber / 144)
    let heights = (fontSizeNumber / 144) * 480;
    return heights;
  } else {
    return Scrollheights.value;
  }
});
</script>

<style lang="less" scoped>
.remarks-style {
  width: 1200px;
  height: 720px;
}
.remarks-style-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 60px 50px 60px 100px;
}
.right-top {
  position: absolute;
  top: 13px;
  right: 11px;
  width: 164px;
  height: 67px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  object-fit: cover;
  cursor: pointer;
}
.scroll-icon {
  width: 22px;
  height: 22px;
  object-fit: cover;
  flex-shrink: 0;
}
.title-box {
  margin-bottom: 36px;
}
.title {
  color: #796a5c;
  font-family: 'SourceHanSerifCN';
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%; /* 51.2px */
}
.sub-title {
  color: #796a5c;
  /* 一级副标 */
  font-family: 'SourceHanSerifCN';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 155.556% */
  margin-top: 15px;
}
.solidBorder-child {
  width: 2px;
  height: 100%;
  background: #857866;
}
:deep(.shadow-box) {
  width: 22px !important;
  height: 22px !important;
}
:deep(.templatestyle1-scroll-box-tumb) {
  justify-content: center;
  img {
    position: relative;
    top: -4px;
    width: 22px !important;
    height: 22px !important;
  }
}
::v-deep .solid-box-parent {
  top: 0 !important;
}
</style>
